<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/styles/mall/index.css">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
</head>
<body>
<div th:replace="common/competition-common::mall-header"></div>
<div th:fragment="competition-sidebar">
    <aside class="sidebar" id="sidebar">
        <ul class="sidebar-nav" id="sidebar-nav">
            <li class="nav-item">
                <a class="nav-link collapsed" href="index.html">
                    <i class="bi bi-grid"></i>
                    <span>管理团队</span>
                </a>
            </li><!-- End Dashboard Nav -->
            <li class="nav-item">
                <a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
                    <i class="bi bi-menu-button-wide"></i><span>我的</span><i
                        class="bi bi-chevron-down ms-auto"></i>
                </a>
                <ul class="nav-content collapse " data-bs-parent="#sidebar-nav" id="components-nav">
                    <li>
                        <a href="/user/user-profile" id="addEvent">
                            <i class="bi bi-circle"></i><span>个人信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="/user/login" id="add-race">
                            <i class="bi bi-circle"></i><span>登录</span>
                        </a>
                    </li>
                    <li>
                        <a href="/user/register" id="my-race">
                            <i class="bi bi-circle"></i><span>注册</span>
                        </a>
                    </li>
                    <li>
                        <a href="/user/page-change-passsword" id="my-event">
                            <i class="bi bi-circle"></i><span>修改密码</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <p th:text="${itemId}"/>
    </aside>
</div>

<div class="mall-body">
    <div id="homeBanner" class="carousel slide home-banner">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#homeBanner" data-bs-slide-to="0" class="active"
                    aria-current="true"  aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#homeBanner" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#homeBanner" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/images/carousel1.png" class="d-block w-100  h-100">
            </div>
            <div class="carousel-item">
                <img src="/images/carousel2.jpg"
                     class="d-block w-100  h-100">
            </div>
            <div class="carousel-item">
                <img src="/images/carousel3.jpeg"
                     class="d-block w-100 h-100">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#homeBanner" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#homeBanner" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <div class="pagetitle">
        <h1>热门赛事</h1>
    </div>
    <section class="section">
        <div class="row align-items-top">
            <div class="col-lg-4">
                <!-- Card with an image on top -->
                <div class="card">
                    <img src="/images/contest1.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card with an image on top</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div><!-- End Card with an image on top -->
            </div>
            <div class="col-lg-4">
                <!-- Card with an image on top -->
                <div class="card">
                    <img src="/images/contest1.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card with an image on top</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div><!-- End Card with an image on top -->
            </div>
            <div class="col-lg-4">
                <!-- Card with an image on top -->
                <div class="card">
                    <img src="/images/contest1.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Card with an image on top</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div><!-- End Card with an image on top -->
            </div>
        </div>
    </section>
</div>
<div th:replace="common/competition-common::mall-footerWithoutsidebar"></div>
</body>
</html>